/**
 * @description main.ts 全局注入
 */
import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
import DemoRounterLayout from "../pages/demo/demo-router/layout/index.vue";
import DemoAllLayout from "../pages/demo/demo-index/index.vue";
import DefaultLayout from "../pages/layout/index.vue";
import { App, defineAsyncComponent } from "vue";

// 登录时通过 authe 接口从服务器端获取
const routes: Readonly<RouteRecordRaw[]> = [
  // {
  //   name: 'monitorMany',
  //   path: '/src/pages/monitor/batch/monitorMany.vue',
  //   component: () => import("@/pages/monitor/batch/monitorMany.vue"),
  //   meta: {
  //     keepAlive: true,
  //     isBack: false
  //   }
  // },
  {
    // 全局唯一
    path: "/",
    // 默认路由
    redirect: "/login",
  },
  {
    // 全局唯一
    path: "/login",
    // 全局唯一
    name: "login",
    component: () => import("@/pages/login/login.vue"),
    children: Array<any>(),
  },
  {
    // 全局唯一
    path: "/forgot-password",
    // 全局唯一
    name: "forgot-password",
    component: () => import("@/pages/login/forgot-password.vue"),
    children: Array<any>(),
  },
  {
    // 全局唯一
    path: "/signup",
    // 全局唯一
    name: "signup",
    component: () => import("@/pages/login/signup.vue"),
    children: Array<any>(),
  },
  // {
  //   path: "/admin",
  //   // 填充 App.vue 中的 router-view
  //   component: DefaultLayout,
  //   name: "admin",
  //   // 默认路由
  //   redirect: "/admin/account/list",
  //   children: Array<any>(),
  // },
  // {
  //   path: "/locker",
  //   // 填充 App.vue 中的 router-view
  //   component: DefaultLayout,
  //   name: "locker-root",
  //   // 默认路由
  //   redirect: "/locker/home",
  //   children: Array<any>(),
  // },
  {
    path: "/demo",
    // 填充 App.vue 中的 router-view
    component: DefaultLayout,
    name: "demo",
    // 默认路由
    redirect: "/demo/index",
    children: Array<any>(),
    // children: [
    //   {
    //     path: "/demo/index",
    //     // 综合测试 demo
    //     component: DemoAllLayout,
    //     name: "demoAll",
    //     // 默认路由，自动初始化嵌套 demo-router/layout/index.vue 中的 <router-view></router-view>
    //     redirect: "/demo/home",
    //     children: [
    //       {
    //         path: "/demo/home",
    //         // 代码中根据 name 进行页面跳转，url 中动态切换 path，例如 /#/home
    //         name: "home",
    //         // 填充 demo-router\layout\index.vue 中的 router-view
    //         component: () => import("../pages/demo/demo-router/home/index.vue"),
    //         meta: {
    //           title: "首页",
    //           icon: "",
    //         },
    //       },
    //       {
    //         path: "/demo/about",
    //         name: "about",
    //         // 填充 demo-router\layout\index.vue 中的 router-view
    //         component: () => import("../pages/demo/demo-router/about/index.vue"),
    //         meta: {
    //           title: "关于",
    //           icon: "",
    //         },
    //       },
    //     ],
    //   },
    //   {
    //     path: "/demo/props",
    //     name: "demo-props",
    //     component: () => import("../pages/demo/demo-props/index.vue"),
    //     meta: {
    //       title: "define props",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/emits",
    //     name: "demo-emits",
    //     component: () => import("../pages/demo/demo-emits/index.vue"),
    //     meta: {
    //       title: "demo emits",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/watch",
    //     name: "demo-watch",
    //     component: () => import("../pages/demo/demo-watch/index.vue"),
    //     meta: {
    //       title: "demo watch",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/expose",
    //     name: "demo-expose",
    //     component: () => import("../pages/demo/demo-expose/index.vue"),
    //     meta: {
    //       title: "demo expose",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/store",
    //     name: "demo-store",
    //     component: () => import("../pages/demo/demo-store/index.vue"),
    //     meta: {
    //       title: "demo store",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/slot",
    //     name: "demo-slot",
    //     component: () => import("../pages/demo/demo-slot/index.vue"),
    //     meta: {
    //       title: "demo slot",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/router",
    //     name: "demo-router",
    //     component: () => import("../pages/demo/demo-router/layout/index.vue"),
    //     meta: {
    //       title: "demo router",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/env",
    //     name: "demo-env",
    //     component: () => import("../pages/demo/demo-env/index.vue"),
    //     meta: {
    //       title: "demo env",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/svg",
    //     name: "demo-svg",
    //     component: () => import("../pages/demo/demo-svg/index.vue"),
    //     meta: {
    //       title: "demo svg",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/axios",
    //     name: "demo-axios",
    //     component: () => import("../pages/demo/demo-axios/index.vue"),
    //     meta: {
    //       title: "demo axios",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/table",
    //     name: "demo-table",
    //     component: () => import("../pages/demo/demo-element-table/index.vue"),
    //     meta: {
    //       title: "demo table",
    //       icon: "",
    //     },
    //   },
    //   {
    //     path: "/demo/datagrid",
    //     name: "demo-datagrid",
    //     component: () => import("../pages/demo/demo-datagrid/index.vue"),
    //     meta: {
    //       title: "demo datagrid",
    //       icon: "",
    //     },
    //   },
    // ],
  },
  {
    // 通用配置页面
    path: "/common",
    // 填充 App.vue 中的 router-view
    component: DefaultLayout,
    name: "common",
    // 默认路由
    redirect: "/404",
    children: [
      {
        path: "/account/center",
        name: "account-center",
        component: () => import("../pages/account/index.vue"),
        // meta: {
        //   title: "个人中心",
        // },
        // menuItemName: "个人中心2",
        children: Array<any>(),
      },
      {
        path: "/403",
        name: "403",
        component: () => import("../pages/layout/components/403.vue"),
        children: Array<any>(),
      },
      // 参数不匹配，内部程序主动触发
      {
        path: "/404",
        name: "404",
        component: () => import("../pages/layout/components/404.vue"),
        children: Array<any>(),
      },
      {
        path: "/500",
        name: "500",
        component: () => import("../pages/layout/components/500.vue"),
        children: Array<any>(),
      },
    ],
  },
  // 全局拦截 url，被动触发
  {
    path: "/:pathMatch(.*)*",
    name: "page-not-found",
    component: () => import("../pages/layout/components/404.vue"),
    children: Array<any>(),
  },
];

// routes.forEach((root) => {
//   // 处理静态 demo 资源
//   // if (root.name == "demo") {
//   //   demoRouters.forEach((item) => {
//   //     if (item.component.indexOf("demo") == 0) {
//   //       root.children.push({
//   //         path: item.uri,
//   //         name: item.component,
//   //         component: () => import("../pages/" + item.component),
//   //         meta: {
//   //           title: item.menuItemName,
//   //           resourceId: item.menuItemId,
//   //         },
//   //       });
//   //     }
//   //   });
//   // }

//   if (root.name == "admin") {
//     // apiAuth
//     //   .loadMenuItem("MENU_SYS")
//     //   .then((response: any) => {
//     //       if (response.data.code == 200) {
//     //         response.data.data.forEach((item: any) => {
//     //           if (item.component.indexOf("admin") == 0) {
//     //             root.children.push({
//     //               path: item.uri,
//     //               name: item.component,
//     //               component: () => import("../pages/" + item.component),
//     //               meta: {
//     //                 title: item.menuItemName,
//     //                 resourceId: item.menuItemId,
//     //               },
//     //             });
//     //           }
//     //         });
//     //       }
//     //   })
//     //   .catch((err: any) => {
//     //
//     //     utils.errorNotification("数据处理错误" , err);
//     //   });
//     // demoRouters.forEach((item: any) => {
//     //   if (item.component.indexOf("admin") == 0) {
//     //     root.children.push({
//     //       path: item.uri,
//     //       name: item.component,
//     //       component: () => import("../pages/" + item.component),
//     //       meta: {
//     //         title: item.menuItemName,
//     //         resourceId: item.menuItemId,
//     //       },
//     //     });
//     //   }
//     // });
//   }

//   if (root.name == "locker-root") {
//     // apiAuth
//     //   .loadMenuItem("")
//     //   .then((response: any) => {
//     //       if (response.data.code == 200) {
//     //         response.data.data.forEach((item: any) => {
//     //           if (item.component.indexOf("locker") == 0) {
//     //             root.children.push({
//     //               path: item.uri,
//     //               name: item.component,
//     //               component: () => import("../pages/" + item.component),
//     //               meta: {
//     //                 title: item.menuItemName,
//     //                 resourceId: item.menuItemId,
//     //               },
//     //             });
//     //           }
//     //         });
//     //     }
//     //   })
//     //   .catch((err: any) => {
//     //
//     //     utils.errorNotification("数据处理错误" , err);
//     //   });
//     // demoRouters.forEach((item) => {
//     //   if (item.component.indexOf("locker") == 0) {
//     //     root.children.push({
//     //       path: item.uri,
//     //       name: item.component,
//     //       component: () => import("../pages/" + item.component),
//     //       meta: {
//     //         title: item.menuItemName,
//     //         resourceId: item.menuItemId,
//     //       },
//     //     });
//     //   }
//     // });
//   }
// });

const router = createRouter({
  // url 无变化，刷新回到首页，无法保存当前页地址
  // history: createMemoryHistory(),
  // url 通过 /#/xxxx 方式，刷新可以保留当前页地址
  history: createWebHashHistory(),
  routes,
});

// 动态添加的路由刷新后会丢失，通过导航守卫动态还原路由状态
// 定义变量判断是否已经动态添加过，如果刷新后load永远为 0
let load = 0;
// 导航守卫
router.beforeEach((to, from, next) => {
  // 获取菜单
  const menuItems = window.store.menuItems;
  //非登录、有菜单数据、 没有进行添加（或者刷新了）
  if (load === 0 && menuItems.length && to.name !== "login") {
    load++;
    //再次调用存储菜单数据
    addDynamicRouters(menuItems);
    //添加后跳转到应访问的地址
    next({ path: to.path });
  } else {
    next();
  }
});

/**
 * 根据菜单数据结构初始路由
 * @param menuItems 菜单数据
 */
export function addDynamicRouters(menuItems: any) {
  // console.log("addDynamicRouters");
  // 有效性校验
  let menuItemIds = Array<string>();
  menuItems.forEach((item: any) => {
    let exists = false;
    menuItemIds.forEach((id: string) => {
      if (id == item.menuItemId) {
        exists = true;
      }
    });
    if (!exists) {
      menuItemIds.push(item.menuItemId);
    } else {
      console.error("router 校验失败, menuItemId 重复", item);
    }
  });

  let uris = Array<string>();
  menuItems.forEach((item: any) => {
    let exists = false;
    uris.forEach((uri: string) => {
      if (uri == item.uri) {
        exists = true;
      }
    });
    if (!exists) {
      uris.push(item.uri);
    } else {
      console.error("router 校验失败, uri 重复", item);
    }
  });

  let modules = import.meta.glob("../pages/**/**.vue");
  // console.log("addDynamicRouters modules", modules);

  menuItems.forEach((root: any) => {
    // 菜单最大三级，前两级菜单渲染到左侧带单，第三级为 tab 页签，如果存在第三级别的菜单，父及页面需要有 <router-view></router-view>
    if (root.parentId == "0") {
      // if (!file.isRouter) return
      let menuItemName = root.menuItemCnName;
      if (window.store.appLocale != "zh_CN") {
        menuItemName = root.menuItemEnName;
      }

      let rootRouter = {
        path: root.uri == "#" ? "" : root.uri,
        name: root.uri == "#" ? menuItemName : root.uri,
        // import 的路径是根据源代码所在位置推断的，并不是运行时推断的
        // component: () => import("../pages/" + root.component),
        // 打包编译后按照上面方式无法加载 vue 文件，需要用 meta 映射到具体的 js
        component: modules["../pages/" + root.component],
        redirect: root.redirect,
        meta: {
          title: menuItemName,
          resourceId: root.menuItemId,
          // 动态路由，注销时需要卸载
          dynamic: true,
        },
        children: Array<any>(),
      };

      menuItems.forEach((item: any) => {
        if (item.parentId == root.menuItemId) {
          let menuItemName = item.menuItemCnName;
          if (window.store.appLocale != "zh_CN") {
            menuItemName = item.menuItemEnName;
          }

          let itemRouter = {
            path: item.uri == "#" ? "" : item.uri,
            name: item.uri == "#" ? menuItemName : item.uri,
            // component: () => import("../pages/" + item.component),
            component: modules["../pages/" + item.component],
            redirect: item.redirect,
            meta: {
              title: menuItemName,
              resourceId: item.menuItemId,
              // 动态路由，注销时需要卸载
              dynamic: true,
            },
            children: Array<any>(),
          };

          menuItems.forEach((tab: any) => {
            if (tab.parentId == item.menuItemId) {
              let menuItemName = tab.menuItemCnName;
              if (window.store.appLocale != "zh_CN") {
                menuItemName = tab.menuItemEnName;
              }

              let tabRouter = {
                path: tab.uri == "#" ? "" : tab.uri,
                name: tab.uri == "#" ? menuItemName : tab.uri,
                // component: () => import("../pages/" + tab.component),
                component: modules["../pages/" + tab.component],
                meta: {
                  title: menuItemName,
                  resourceId: tab.menuItemId,
                  // 动态路由，注销时需要卸载
                  dynamic: true,
                },
                // children: Array<any>(),
              };
              // console.log("addDynamicRouters",tabRouter);
              itemRouter.children.push(tabRouter);
            }
          });
          rootRouter.children.push(itemRouter);
        }
      });
      router.addRoute(rootRouter);
      // console.log("addDynamicRouters rootRouter", rootRouter);
    }
  });
}

export function clearDynamicRouters() {
  // console.log("clearDynamicRouters");
  router.getRoutes().forEach((m: any) => {
    if (m.meta.dynamic) {
      router.removeRoute(m);
    }
  });
}

export default router;
